<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AB对战</title>
    <style>
      h1 {
        width: 500px;
        text-align: center;
      }
      .tips {
        background-color: azure;
        padding: 12px;
        width: 480px;
        text-align: center;
      }
      .war-area {
        position: relative;
        background-color: rgb(243, 233, 220);
        border: 2px solid #d8d8d8;
        width: 500px;
        height: 500px;
      }
      .war {
        position: absolute;
        width: 50px;
        height: 50px;
        display: inline-flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        border-radius: 20px;
        color: white;
      }
      .war-blood {
        position: relative;
        width: 100%;
      }
      #user-black-blood,
      #user-red-blood {
        position: absolute;
        top: -30px;
        left: 0;
        height: 10px;
        background-color: rgb(6, 252, 67);
      }
      #user-black {
        left: 0;
        top: 0;
        background-color: black;
      }
      #user-red {
        left: 450px;
        top: 450px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h1>AB对战</h1>
    <div class="tips">
      两套方向键控制AB对战，攻击武器（剪刀石头布），输的血条掉。
    </div>
    <div class="war-area">
      <div class="war" id="user-black">
        <div class="war-blood">
          <div id="user-black-blood"></div>
        </div>
        <div id="user-black-win"></div>
      </div>
      <div class="war" id="user-red">
        <div class="war-blood">
          <div id="user-red-blood"></div>
        </div>
        <div id="user-red-win"></div>
      </div>
    </div>
    <script>
      const userBlackDom = document.getElementById("user-black");
      const userRedDom = document.getElementById("user-red");
      const userBlackBloodDom = document.getElementById("user-black-blood");
      const userRedBloodDom = document.getElementById("user-red-blood");
      const userBlackWinDom = document.getElementById("user-black-win");
      const userRedWinDom = document.getElementById("user-red-win");

      var bloodb = 50;
      var bloodr = 50;
      userBlackBloodDom.style.width = bloodb + "px";
      userRedBloodDom.style.width = bloodr + "px";

      var cleftb = parseInt(getComputedStyle(userBlackDom).left);
      var ctopb = parseInt(getComputedStyle(userBlackDom).top);

      var cleftr = parseInt(getComputedStyle(userRedDom).left);
      var ctopr = parseInt(getComputedStyle(userRedDom).top);

      var valb = 0;
      var valr = 1;

      const winMap = ["剪刀", "石头", "布"];

      userBlackWinDom.innerText = winMap[valb];
      userRedWinDom.innerText = winMap[valr];

      const keyMap = {
        ArrowLeft: () => {
          cleftb -= 10;
        },
        ArrowRight: () => {
          cleftb += 10;
        },
        ArrowUp: () => {
          ctopb -= 10;
        },
        ArrowDown: () => {
          ctopb += 10;
        },
        a: () => {
          cleftr -= 10;
        },
        d: () => {
          cleftr += 10;
        },
        w: () => {
          ctopr -= 10;
        },
        s: () => {
          ctopr += 10;
        },
        l: () => {
          valb++;
          if (valb > 2) {
            valb = 0;
          }
          userBlackWinDom.innerText = winMap[valb];
        },
        x: () => {
          valr++;
          if (valr > 2) {
            valr = 0;
          }
          userRedWinDom.innerText = winMap[valr];
        },
      };

      function keyEngine(key) {
        // console.log(666.002, key);
        if (keyMap[key]) {
          keyMap[key]();
        }
      }
      document.addEventListener("keydown", (e) => {
        keyEngine(e.key);
        if (Math.abs(cleftb - cleftr) < 50 && Math.abs(ctopb - ctopr) < 50) {
          console.log(666.999, "撞了！！！");
          cleftb = 0;
          ctopb = 0;
          cleftr = 450;
          ctopr = 450;

          if (
            (valb > valr && valr != 0 && valb != 2) ||
            (valb == 0 && valr == 2)
          ) {
            bloodb -= 10;
          } else if (valb != valr) {
            bloodr -= 10;
          }

          if (bloodr == 0 || bloodb == 0) {
            alert("游戏结束！");
            bloodb = 50;
            bloodr = 50;
          }

          userBlackBloodDom.style.width = bloodb + "px";
          userRedBloodDom.style.width = bloodr + "px";
        }
        userBlackDom.style.left = cleftb + "px";
        userBlackDom.style.top = ctopb + "px";
        userRedDom.style.left = cleftr + "px";
        userRedDom.style.top = ctopr + "px";
      });
    </script>
  </body>
</html>
